<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
	<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	<style>
	 .header h1{
		background-image:url(http://www.google.com.hk/images/srpr/logo4w.png);
		width:280px;
		height:30px;
	 }
	 .navbar-pink{
		background-color: #C36;
		border: 0;
		border-radius: 0;
		color:#fff;
		-webkit-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		-moz-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
	 }
	 .navbar-nav li a{
	   color:#fff;
	   font-size:16px;
	 }
	 .navbar-nav li a:hover{
		background-color: #a30052;
	 }
	 #footer {
		background-color: #B30558;
		border-top: 1px solid #1c9971;
		color: #a5d8c7;
		text-shadow: 0 1px 0 rgba(0,0,0,0.15);
		margin-top:50px;
	 }
	 #footer-inner {
		max-width: 940px;
		margin: 0 auto;
		padding-bottom: 20px;
		overflow: hidden;
		position: relative;
	 }
	
	.nav-foot p.footer-links {
	  margin-bottom: 15px;
	}
	.frendlinks ul {
		list-style: none;
		overflow: hidden;
		margin: 0;
		background: rgba(37, 20, 20, 0.35);
		text-align: justify;
	}
	.frendlinks ul li {
		float: left;
		margin-right: 10px;
		height: 25px;
		line-height: 25px;
		overflow: hidden;
	}
	footer a,.frendlinks ul li a{
	    color:#FFFAFA;
	}
	
	.pricing-row .item{
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		background-color: #39b3d7;
		padding:5px;
		margin:auto 5px;
		border:2px;
		border-color:#269abc;
		color:#fff;
	}
	.pricing-row .item:hover{
		border:2px;
		border-color:#B30558;
	}
	.item h2,.item p:last-child{
		text-align:center;
	}
    .price {
		font-size: 30px;
		font-weight: bold;
		text-transform: uppercase;
		vertical-align: middle;
		display: table-cell;
		text-align:center;
	}
    .price-body {
		width: 125px;
		height: 125px;
		margin: 0 auto 15px auto;
		border: 2px solid #fff;
		border-radius: 100%;
		display: table;
	}
	.price-figure{
		color:#269abc;
	}
	.color-teal {
		color: #00A0B1;
	}
	.bg-white{
		background: #FFFFFF;
	}
	.icon-bar{
		background: #fff;
	}
	.contact{
		background-color: #252525;
		margin:50px 0px -50px;
	}
	.contact .contact-section{
		background-color: #2f2f2f;
		margin-top: 50px;
		margin-bottom: 50px;
		height: 385px;
		overflow: hidden;
		margin:5px;
		padding:10px;
	}
	.contact-section p,.contact-section h3{
		color: #999;
	}
	</style>
  </head>
  <body>
	<div class="header">
	  <div class="container">
		<h1>白雪公主影楼</h1>
	  </div>
	</div>
    <div class="navbar navbar-pink" role="navigation"><!---add class "navbar-fixed-top"---->
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">白雪公主影楼</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">网站首页</a></li>
            <li><a href="case.html">作品展示</a></li>
			<li><a href="theme.html">主题风格</a></li>
            <li><a href="pricing.html">套系报价</a></li>
			<li><a href="about.html">关于我们</a></li>
			<li><a href="about.html#contacter">联系我们</a></li> 
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    
    <!-- 报价 ================================================== -->
	<div class="container">
      
		<div class="row featurette">
			<div class="col-md-7">
			  <h2 class="featurette-heading">专业成就经典 <span class="text-muted">服务领跑未来</span></h2>
			 
                <p class="lead">  白雪公主摄影工作室专注于婚纱、人像、情侣、孕妇写真、亲子照的摄影，全程一对一的精致拍摄服务。</p>
				
				<p class="lead"> 白雪公主摄影以“专业、创新、领先”的服务理念，为您量身打造个性化专属风格的婚纱照。白雪公主摄影为广大结婚新人提供国内顶尖的摄影技术及化妆造型技术，拍摄全程 “专职秘书式”服务，国际时尚潮流的婚纱礼服以及丰富的主题实景拍摄等服务，拍婚纱照首选白雪公主摄影，一生一次，只选最好的！</p>
				<p class="lead"> 白雪公主摄影将继续坚持“专业、创新、领先”的服务理念，提供最好的婚纱、人像、情侣、孕妇写真、亲子照摄影服务。</p>
            
			</div>
			<div class="col-md-5">
			  <img class="featurette-image img-responsive" alt="500x500" src="img/about.jpg">
			</div>
		</div>
    
      </div><!-- /.container -->
	  <div class="address" style="width:100%;">
	   <iframe src="map.html" style="width:100%;height:580px;border:0px;"></iframe>
	  </div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h3>如何前往</h3>
					<div class="panel-group" id="accordion">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="panel-title"><a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 乘坐公交</a>
								</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse in">
						  <div class="panel-body">
							可搭乘公交28、813、874、25、59、60、135、577、103、124
						  </div>
						</div>
					</div>  
				</div>
			 </div>
			 <div class="col-md-6">
			     <h3>详细地址</h3>
				 <p>上海国际时尚中心秀场（上海市杨浦区杨树浦路2866号）</p>
			 </div>
		</div>
	</div>
	<div class="contact" id="contacter">
		<div class="container">
		   <div class="row">
			  <div class="col-md-4">
			     <div class="contact-section">
					 <h3>联系我们</h3>
					 <div class="textwidget">
					    <p>电话：<a href="#contacter" style="float:right;">0370-23243434</a></p>
						<p>手机：<a href="#contacter" style="float: right;">bd@technode.com</a></p>
						<p>QQ：<a href="#contacter" style="float: right;">event@technode.com</a></p>
						<p>微信：<a href="#contacter" style="float: right;">event@technode.com</a></p>
						<hr style="border-top: 1px solid #252525;">
						<p>新浪微博：<a href="mailto:bd@technode.com" style="float: right;">bd@technode.com</a></p>
						
					</div>
				</div>
			  </div>
			  <div class="col-md-4">
				 <div class="contact-section">
					 <h3>关注我们</h3>
					 <p><img src="img/weixin.jpg"></p>
				 </div>
			  </div>
			   <div class="col-md-4">
			     <div class="contact-section">
					 <h3>微博动态</h3>
					 <p>上海国际时尚中心秀场（上海市杨浦区杨树浦路2866号）</p>
				</div>
			  </div>
		   </div>
	  </div>
	</div>
     
    
	<footer id="footer" class="footer hidden-print">
		<div id="footer-inner">
			<div class="partners">
				<a href="http://www.net.cn" target="_blank" class="wanwang" rel="nofollow"></a>
				<a href="http://vdisk.weibo.com/" class="weipan" target="_blank" rel="nofollow"></a>
				<a href="http://weibo.com/uidesign" target="_blank" class="weibo" rel="nofollow"></a>
				<a href="http://t.qq.com/youshege" target="_blank" class="tweibo" rel="nofollow"></a>
				<a href="http://qiniutek.com/" target="_blank" class="qiniu" rel="nofollow"></a>
				<p style="clear:both;">特别鸣谢 <a href="http://www.net.cn" target="_blank" rel="nofollow">万网</a> 赞助主机，<a href="http://www.qiniutek.com" target="_blank">七牛</a> 赞助图片加速</p>
			</div>
			<div class="nav-foot">
			<p class="footer-links"><a href="http://uisdc.com/ad/" rel="nofollow">广告合作</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/duty/" rel="nofollow">免责声明</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/friendlink/" rel="nofollow">友情链接</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/contact/" rel="nofollow">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/about/" rel="nofollow">关于我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://e.weibo.com/uidesign/" rel="nofollow">@优秀网页设计</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优设官方 QQ 群：<select style="display:inline;color:#000">
				<option class="fcg">181671383</option>
				<option class="fcr">87096978</option>
				<option class="fcr">192586823</option>
				<option class="fcr">158514561</option>
				<option class="fcr">216862992</option>
				<option class="fcr">124169968</option>
				<option class="fcr">96096993</option>
				<option class="fcr">199178798</option>
				<option class="fcr">79321884</option>
				<option class="fcr">244419297</option>
				<option class="fcr">193642837</option>
				<option class="fcr">179124119</option>
				<option class="fcr">172111170</option>
				<option class="fcr">277704164</option></select></p>
				<p class="credit">Copyright © 2013<strong> <a class="site-link" href="http://www.uisdc.com" title="优设-UISDC" rel="home"><span>优设-UISDC</span></a></strong> - 优秀网页设计联盟 Powered by <a class="wp-link" href="http://wordpress.org" title="State-of-the-art semantic personal publishing platform"><span>WordPress</span></a> and <a href="http://www.net.cn" rel="nofollow">中国万网</a> - <a target="_blank" href="http://www.miibeian.gov.cn">粤ICP备12017804号-1 </a></p>						<div style="display:none">
											<a href="http://tongji.baidu.com/hm-web/welcome/ico?s=7aeefdb15fe9aede961eee611c7e48a5" target="_blank">网站统计</a>
										</div>
									</div>
		<div class="frendlinks"><h6>友情链接</h6>
			<ul class="frendlink-ul">
				
				<li><a href="http://www.hao123.com/" title="hao123上网导航" target="_blank">hao123上网导航</a></li>
				<li><a href="http://hao.uisdc.com/" title="设计师网址导航为优秀网页设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！" target="_blank">设计师网址导航</a></li>
				<li><a href="http://cdc.tencent.com/" rel="nofollow" title="腾讯用户研究与体验设计中心" target="_blank">腾讯CDC</a></li>
				<li><a href="http://ueo.baidu.com/" title="百度联盟事业部用户体验团队官方博客" target="_blank">百度联盟UEO</a></li>
				<li><a href="http://uxc.360.cn/" title="360用户体验设计中心" target="_blank">360用户体验设计</a></li>
				<li><a href="http://ued.taobao.com/" title="淘宝UED" target="_blank">淘宝UED</a></li>
				<li><a href="http://udc.weibo.com/" title="新浪微博设计团队" target="_blank">新浪微博设计团队</a></li>
				<li><a href="http://vc.changyou.com" rel="nofollow" title="搜狐畅游VC" target="_blank">搜狐畅游VC</a></li>
				<li><a href="http://www.hubei.com/" title="武汉生活第一门户，湖北网(hubei.com)是一个专门为武汉1000万武汉人提供武汉本地生活、消费信息、购物指导和情感交流的网上生活家园" target="_blank">湖北网</a></li>
				<li><a href="http://hao.qq.com/" title="QQ导航–腾讯旗下的网址导航，收录休闲生活相关的优秀网站，为您提供最便捷最安全的网址大全服务" target="_blank">QQ网址导航</a></li>
				<li><a href="http://hao.360.cn/" title="360安全网址导航" target="_blank">360安全网址导航</a></li>
				<li><a href="http://www.iconfans.org/" title="iconfans" target="_blank">iconfans</a></li>
				<li><a href="http://nav80.com/" title="Nav80设计师网址导航" target="_blank">Nav80网址导航</a></li>
				<li><a href="http://ux.etao.com/" title="一淘UX用户体验中心" target="_blank">一淘UX</a></li>
				<li><a href="http://ecd.tencent.com/" rel="nofollow" title="腾讯电商ecd" target="_blank">腾讯电商ecd</a></li>
				<li><a href="http://isux.tencent.com/" title="腾讯社交用户体验设计" target="_blank">腾讯ISUX</a></li>
				<li><a href="http://www.gn00.com/" target="_blank">技术宅社区</a></li>
				<li><a href="http://www.shejidaren.com/" title="谈谈网页设计、用户体验，聊聊前端开发，分享高质量设计资源和灵感，爱设计，爱分享" target="_blank">设计达人</a></li>
				<li><a href="http://shop62443992.taobao.com/" rel="nofollow" title="瓷言瓷语" target="_blank">设计师的陶瓷铺子</a></li>
				<li><a href="http://www.itnews001.com/" title="专业的IT科技、数码、电脑、软件硬件、手机、游戏、苹果、iphone、ipad、安卓、互联网、创意概念、设计资讯报道" target="_blank">IT资讯网</a></li>
				<li><a href="http://tgideas.qq.com/" title="腾讯游戏的专业设计团队" target="_blank">腾讯TGideas</a></li>
				<li><a href="http://pcedu.pconline.com.cn/sj/" target="_blank">PConline创意设计</a></li>
				</ul>
			</div>
		</div>
	</footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
	<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
	<script src="js/bootstrap-image-gallery.js"></script>
	<script src="js/demo.js"></script>
  </body>
</html>